<template>
	<view class="container">
		<view class="carousel" v-if="product.logo">
			<swiper indicator-dots circular=true duration="400">
				<swiper-item class="swiper-item">
					<view class="image-wrapper">
						<image :src="product.url" class="loaded" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<view class="title-section">
			<text class="title">{{product.productName}}</text>
			<view class="price-box">
				<text class="price text-red">¥{{product.price}}</text>
				<text class="m-price text-gray">{{product.originalPrice}}</text>
				<text class="fr text-gray">销量: {{product.sales}}</text>
			</view>
		</view>

		<view class="cu-list menu margin-bottom-xl">
			<view class="cu-item arrow">
				<text>产品规格</text>
				<text class="text-gray">{{product.speAttr}}</text>
			</view>
		</view>

		<view class="remark-section">
			<scroll-view class="bg-gray nav text-center">
				<view class="flex text-center">
					<view class="cu-item flex-sub" :class="0==currentTab?'text-white cur':''" @click="tabSelect" :data-id="0">图文详情</view>
					<view class="cu-item flex-sub" :class="1==currentTab?'text-white cur':''" @click="tabSelect" :data-id="1">产品参数</view>
					<view class="cu-item flex-sub" :class="2==currentTab?'text-white cur':''" @click="tabSelect" :data-id="2">买家评论({{comments.length}})</view>
				</view>
			</scroll-view>
			<swiper :current="currentTab" @change="swiperChange" :style="{height:swiperHeight+'px'}">
				<swiper-item>
					<view class="remark-content" :id="'swiper_id_1'">
						<u-parse :content="product.remark"></u-parse>
					</view>
				</swiper-item>
				<swiper-item>
					<view :id="'swiper_id_2'">
						<view class="cu-list menu margin-bottom-xl">
							<view class="cu-item" v-for="(item,index) in product.attrs" :key="index">
								<text>{{item.name}}:{{item.data}}</text>
							</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view :id="'swiper_id_3'">
						<uni-evaluate :list-data="comments"/>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<view class="cu-bar bg-white tabbar border shop fixed">
			<view class="bg-orange submit">{{timeText}}</view>
			<view v-if="product.status===200" class="bg-red submit" @click="directBuy">立即秒杀</view>
			<view v-else class="bg-gray submit text-gray">立即秒杀</view>
		</view>
	</view>
</template>
<script>
	import uParse from '@/components/u-parse/u-parse.vue';
	import uniEvaluate from '../../components/xiujun-evaluate/uni-evaluate.vue';
	import {ProductService} from "@/api/ProductService.js"
	import {CommentService} from "@/api/MessageService.js"
	
	export default {
		components: {uParse,uniEvaluate},
		data() {
			return {
				currentTab: 0,productCount:0,timer:undefined,timeText:"00:00:00",
				product: {
					productName:undefined,name:undefined,price:0,originalPrice:0,
					attrs:[],remark:undefined
				},
				comments:[],
				swiperHeight:0,defaultHeight:0,productId:0,secKillId:0,
				selectSku:{buyCount:1,sn:undefined, stock:0,title:undefined,price:undefined,value:"",select:false}
			};
		},
		onPullDownRefresh() {
			this.loadProduct();
			this.loadComment();
			uni.stopPullDownRefresh();
		},
		onShareAppMessage: function() {
			uni.showShareMenu({
			  withShareTicket: true,
			  menus: ['shareAppMessage', 'shareTimeline']
			})
		},
		onShareTimeline: function (res) {
		    return {
		      title: "["+this.product.name+"]"+this.product.productName
		    }
		 },
		created() {
			uni.getSystemInfo({
				success: (res) => {
					this.defaultHeight=(res.windowHeight * (750 / res.windowWidth));
				}
			});
		},
		onLoad(options) {
			uni.showShareMenu({});
			this.secKillId = options.secKillId;
			this.productId=options.productId;
		},
		onReady() {
			this.loadProduct();
			this.loadComment();
		},
		onUnload(){
			clearInterval(this.timer);
			this.timer = null;
		},
		methods: {
			loadProduct(){
				clearInterval(this.timer);
				this.timer = null;
				ProductService.detailSeckill(this.secKillId).then((res)=>{
					this.product=res;
					this.$set(this.product,'txt',res.txt)
					this.setAppTitle();
					this.setSwiperHeight();
					this.getCountdownTime();
				});
			},
			setAppTitle(){
				uni.setNavigationBarTitle({
					title:this.product.name+"  "+this.product.productName
				});
			},
			loadComment(){
				CommentService.listComment(this.productId).then(res=>{
					this.comments=res;
				});
			},
			directBuy(){
				const cart={buyCount:1,name:this.product.productName,price:this.product.price,sn:this.product.sn,productId:this.productId,speTitle:this.product.speAttr,url:this.product.url};
				const that=this;
				uni.navigateTo({
					url:"/pages/cart/confirm?activityType=2&activityId="+this.secKillId,
					success:function(res){
						res.eventChannel.emit('sendProducts', [cart]);
					}
				})
			},
			tabSelect(e) {
				this.currentTab = e.currentTarget.dataset.id;
			},
			swiperChange(e){
				this.currentTab=e.target.current
				this.setSwiperHeight();
			},
			setSwiperHeight() {
				const that = this;
				setInterval(function(){
					let obj = uni.createSelectorQuery().in(that).select("#swiper_id_" + (that.currentTab+1));
					obj.boundingClientRect(function(data) {
						if (data) {
							that.swiperHeight = data.height;
							if(that.swiperHeight<that.defaultHeight){
								that.swiperHeight=that.defaultHeight;
							}
						}
					}).exec();
				},2000)
			},
			getCountdownTime(){
				let startTime = this.product.startTime.replace(/\-/g, "/");
			    let endTime = this.product.endTime.replace(/\-/g, "/");
			    let sTime = new Date(startTime);
			    let eTime = new Date(endTime);
				
				let now = new Date();
				let seconds=parseInt((now.getTime() - eTime.getTime()) / 1000);
				if(seconds>0){
					// 当前时间大于结束时间 活动已经结束
					this.timeText='活动已结束'
					return;
				}
				seconds=parseInt((now.getTime() - sTime.getTime()) / 1000);
				if(seconds<0){
					// 当前时间小于开始时间 活动未开始
					this.timeText='活动未开始'
					return;
				}
				sTime = now;
				seconds=parseInt((eTime.getTime() - sTime.getTime()) / 1000);
				let time=seconds;
				if (time>0) {
					this.timer = setInterval(() => {
						if(time == 0){
							clearInterval(this.timer)
							this.product.status=0;
							this.timeText="00:00:00";
						}else{
							let h = parseInt((time/3600)%24);h=h>=10?h:'0'+h;
							let m = parseInt((time/60)%60);m=m>=10?m:'0'+m;
							let s=parseInt(time%60);s=s>=10?s:'0'+s;
							this.timeText=parseInt(seconds/3600/24)+"天 "+h+":"+m+":"+s;
							time --;
						}
					},1000);
				}
			}
		}
	}
</script>

<style lang='scss'>
	.carousel {
		height: 722upx;
		position: relative;

		swiper {
			height: 100%;
		}

		.image-wrapper {
			width: 100%;
			height: 100%;
		}

		.swiper-item {
			display: flex;
			justify-content: center;
			align-content: center;
			height: 750upx;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}

	}

	.title-section {
		padding: 20upx 30upx;
		.title {
			font-size: 32upx;height: 50upx;line-height: 50upx;
		}
		.price-box {
			align-items: baseline;height: 64upx;padding: 10upx 0;font-size: 26upx;
		}
		.price {
			font-size: 32upx + 2upx;
		}
		.m-price {
			margin: 0 12upx;color: #909399;text-decoration: line-through;
		}
	}

	.remark-section {
		margin-top: 16upx;margin-bottom:150rpx;
		.cu-item.cur{
			background: #ffffff;color: red;border-top: 4rpx solid;border-bottom: 0 !important;padding: 0;margin: 0;
		}
		swiper{
			min-height: 500rpx;
			.remark-content{
				margin:20rpx;
			}
		}
	}
	.cu-bar.fixed, .nav.fixed{
		bottom:0;top:unset !important;
	}
	.attr-content {
		padding: 10upx 30upx;
		.a-t {
			display: flex;
			image {
				width: 170upx;height: 170upx;flex-shrink: 0;border-radius: 8upx;
			}
			.right {
				display: flex;flex-direction: column;padding-left: 24upx;font-size: 24upx + 2upx;color: #606266;line-height: 42upx;
				.price {
					font-size: 32upx;margin-bottom: 10upx;
				}
				.selected-text {
					margin-right: 10upx;
				}
			}
		}
		.attr-list {
			display: flex;flex-direction: column;font-size: 28upx + 2upx;color: #606266;padding-top: 30upx;padding-left: 10upx;
		}
		.item-list {
			padding: 30upx 0 0;display: flex;flex-wrap: wrap;
			text {
				display: flex;align-items: center;justify-content: center;background: #eee;margin-right: 20upx;margin-bottom: 20upx;border-radius: 100upx;min-width: 60upx;height: 60upx;padding: 0 20upx;font-size: 28upx;color: #303133;
			}
			.selected {
				background: #fbebee;color: $uni-color-primary;
			}
		}
	}
	.coupon-list{
		max-height: 620rpx;overflow: auto;
		.coupon-item {
			display: flex;flex-direction: column;margin: 20upx 24upx;background: #fff;text-align: left;
			.con {
				display: flex;align-items: center;position: relative;height: 120upx;padding: 0 30upx;
				&:after {
					position: absolute;left: 0;bottom: 0;content: '';width: 100%;height: 0;border-bottom: 1px dashed #f3f3f3;transform: scaleY(50%);
				}
			}
			.left {display: flex;flex-direction: column;justify-content: center;flex: 1;overflow: hidden;height: 100upx;}
			.title {font-size: 32upx;color: #303133;margin-bottom: 10upx;}
			.time {font-size: 24upx;color: #909399;}
			.right {display: flex;flex-direction: column;justify-content: center;align-items: center;font-size: 26upx;color: #606266;height: 100upx;}
			.price {
				font-size: 44upx;color: #fa436a;
				&:before {
					content: '￥';
					font-size: 34upx;
				}
			}
			.tips {
				font-size: 24upx;color: #909399;line-height: 60upx;padding-left: 30upx;
			}
			.circle {
				position: absolute;left: -6upx;bottom: -10upx;z-index: 10;width: 20upx;height: 20upx;background: #f3f3f3;border-radius: 100px;
				&.r {
					left: auto;right: -6upx;
				}
			}
		}
	}
	.no_coupon{margin: 20% 0;}
</style>